<template>
  <div>
    <a-affix :offset-top="0">
      <!-- 标题栏 -->
      <div class="headBox">
        <div class="maxWidth flexBet titleBox">
          <div class="flexLeft">
            <!-- <img src="../../assets/images/logo.png" alt="logo" class="logo" /> -->
            <h1 class="fonBold fontS28 marL18">
              安徽省广播电视联合会专业技术委员会
            </h1>

            <div class="nav_box1">
              <ul class="maxWidth flexLeft">
                <li
                  class="navItem fontS18"
                  :class="{ ser_item: current_nav == k }"
                  v-for="(i, k) in navList"
                  :key="k"
                  @click="changeNav(k, i.path)"
                >
                  {{ i.name }}
                </li>
              </ul>
            </div>
          </div>
          <div class="headRightBox flexLeft" v-if="userDataInfo.nickName">
            <span class="fontS20">欢迎您，{{ userDataInfo.nickName }}</span>
            <span class="line marLR20"></span>
            <a-popconfirm
              placement="bottom"
              title="是否确认退出？"
              ok-text="确定"
              cancel-text="取消"
              @confirm="confirm"
            >
              <span class="fontS20 out">退出</span>
            </a-popconfirm>
          </div>
          <div class="headRightBox flexLeft" v-else>
            <span class="fontS20" @click="login">登录</span>
            <span class="line marLR20"></span>
            <!-- <span class="fontS20 out">注册</span> -->
            <router-link :to="{ name: 'Register' }" class="fontS20 out"
              >注册</router-link
            >
          </div>
        </div>
        <!-- nav -->
        <!-- <div class="nav_box">
          <ul class="maxWidth flexLeft">
            <li
              class="navItem wColor fontS24"
              :class="{ ser_item: current_nav == k }"
              v-for="(i, k) in navList"
              :key="k"
              @click="changeNav(k, i.path)"
            >
              {{ i.name }}
            </li>
          </ul>
        </div> -->
      </div>
    </a-affix>
    <!-- 背景盒子 -->
    <!-- <div class="pageBg posA"></div> -->
    <!-- 登录弹窗 -->
    <a-modal
      title="登录账号"
      :visible="visible"
      @cancel="handleCancel"
      :footer="null"
      width="367px"
    >
      <a-form-model ref="ruleForm" :model="form" :rules="rules">
        <a-form-model-item ref="name" prop="username">
          <a-input
            size="large"
            v-model="form.username"
            placeholder="请输入账户"
          >
            <a-icon slot="prefix" type="phone" />
          </a-input>
        </a-form-model-item>
        <a-form-model-item>
          <a-input-password
            size="large"
            v-model="form.password"
            placeholder="请输入密码"
          >
            <a-icon slot="prefix" type="phone" />
          </a-input-password>
        </a-form-model-item>
        <a-form-model-item>
          <div class="flexBet">
            <a-input
              style="width: 200px"
              size="large"
              v-model="form.code"
              placeholder="请输入验证码"
            />
            <img
              :src="imageUrl"
              style="height: 40px"
              alt="图片验证码"
              @click="changeAuthCode"
            />
          </div>
        </a-form-model-item>
      </a-form-model>
      <div class="flexBet">
        <a-checkbox @change="onChange">
          <span class="automatic fontS12">下次自动登录</span>
        </a-checkbox>
        <div class="color1A fontS12 cup">忘记密码？</div>
      </div>
      <a-button
        type="primary"
        :loading="iconLoading"
        @click="enterIconLoading"
        block
        size="large"
        class="loginBtn flexCon marT30"
      >
        登录
      </a-button>
      <div
        class="color1A flexRight marT15 fontS12 padB40 cup"
        @click="register"
      >
        还没有账号？立即注册
      </div>
    </a-modal>
  </div>
</template>

<script>
import base from "@/api/servers/baseUrl";
import { captchaImage, login, loginOut, loginSingle } from "@/api";
import { mapState } from "vuex";
export default {
  inject: ["reload"],
  data() {
    return {
      base,
      current_nav: 0, // 当前选中的nav
      visible: false,
      form: {
        username: "",
        password: "",
        uuid: "",
        code: "",
      },
      rules: {
        username: [
          {
            required: true,
            message: "账户不得为空",
            trigger: "blur",
          },
        ],
        region: [
          {
            required: true,
            message: "密码不能为空",
            trigger: "change",
          },
        ],
      },
      iconLoading: false, // 登录按钮loading
      imageUrl: "", // 验证码图片地址
    };
  },
  created() {

    var ticket_token = this.getQueryVariable("ticket_token");
    var token=sessionStorage.getItem('ToKen')
    //判断当前是否为空
    // eslint-disable-next-line no-empty
    if((ticket_token!=null||ticket_token!='')&&(token==null||token=='')) {
      this.loginSingle(ticket_token)
    }
    this.current_nav = sessionStorage.getItem("current_nav") || 0;


    let userQx = JSON.parse(sessionStorage.getItem("userQx")) || [
      {
        hidden: false,
        name: "首页",
        path: "/index",
      },
      {
        hidden: false,
        name: "公告",
        path: "/declare",
      },
    ];
    this.$store.commit("SET_USER_QX", userQx);
  },
  computed: {
    userDataInfo() {
      return this.$store.state.userInfo;
    },
    ...mapState({
      navList: (state) => state.userQX,
    }),
  },
  // 监听,当路由发生变化的时候执行
  watch: {
    $route(to, from) {
      console.log(this.navList)
      console.log(to.path);
      for (let index = 0; index < this.navList.length; index++) {
        // const element = this.navList[index];
        if(this.navList[index].path == to.path){
          this.current_nav = index
        }
      }
    },
  },
  methods: {
    //   导航栏切换事件
    changeNav(k, path) {
      this.current_nav = k;
      sessionStorage.setItem("current_nav", k);
      this.$router.push({ path });
    },
    // 登录
    login() {
      this.changeAuthCode();
      this.visible = true;
    },
    showModal() {
      this.visible = true;
    },
    handleCancel() {
      this.visible = false;
    },
    // eslint-disable-next-line no-unused-vars
    async loginSingle(token){
      const res = await loginSingle({'token':token});
      if (res.code == 200) {
        sessionStorage.setItem("ToKen", res.token);
        sessionStorage.setItem(
            "declare",
            JSON.stringify(this.$store.state.declare)
        );
        this.$store.dispatch("GET_USER_INFO");
        this.$store.dispatch("GET_USER_QX");
        this.reload();
      }
    },
    async enterIconLoading() {
      this.iconLoading = true;
      const res = await login(this.form);
      this.iconLoading = false;
      if (res.code != 200) {
        this.changeAuthCode();
        return this.$message.error(res.msg);
      }

      this.$message.success(res.msg);
      sessionStorage.setItem("ToKen", res.token);
      sessionStorage.setItem(
        "declare",
        JSON.stringify(this.$store.state.declare)
      );
      this.visible = false;
      this.$store.dispatch("GET_USER_INFO");
      this.$store.dispatch("GET_USER_QX");
      this.reload();
    },
    // 图片验证码
    async changeAuthCode() {
      const res = await captchaImage();
      this.imageUrl = "data:image/gif;base64," + res.img;
      this.form.uuid = res.uuid;
    },
    // 下次自动登录
    onChange(e) {
      console.log(`checked = ${e.target.checked}`);
    },
    // 退出登录
    async confirm() {
      const res = await loginOut();
      console.log(this.navList.pop())
      if (res.code == 200) {
        sessionStorage.clear();
        this.$store.commit("SET_USER_INFO", null);
        this.$message.success(res.msg);
        this.$router.push("/index");
      }
    },
    register() {
      this.visible = false;
      this.$router.push({ name: "Register" });
    },
    //获取网站地址参数
    getQueryVariable(variable){
      var query = window.location.search.substring(1);
      var vars = query.split("&");
      for (var i=0;i<vars.length;i++) {
        var pair = vars[i].split("=");
        if(pair[0] == variable){return pair[1];}
      }
      return(false);
    },
  },
};
</script>

<style>
</style>
